<!--客户端界面-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket</title>
</head>
<body>
<h2>websocket</h2>
<h1>服务器端信息显示区</h1>
<textarea id="fuwu" style="width: 200px; height: 300px">

</textarea>
<h1>客户信息输入区</h1>
<textarea id="kehu" style="width: 200px">

</textarea>
<button onclick="myFirst()">发送</button>

<script>
    function myFirst() {
        socket.send(document.getElementById("kehu").value);
        document.getElementById("kehu").value =null;
    }
    var socket;
    if (typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    } else {
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口建立连接
        socket = new WebSocket("ws://localhost:8091/websocket");
//        打开事件
        socket.onopen = function () {
            console.log("Socket已打开");
//            socket.send("这是来自客户端的消息:" + new Date());
        };
        //获得服务器端消息事件
        socket.onmessage = function (msg) {
            console.log(msg.data);
            // alert(msg.data);
            document.getElementById("fuwu").value = document.getElementById("fuwu").value+"\n"+ msg.data;
        };
        //关闭事件
        socket.onclose = function () {
            console.log("Socket已关闭");
        };

        //发生了错误事件
        socket.onerror = function () {
            alert("Socket发生了错误");
        }
    }

</script>

</body>
</html>